<template>
  <div :style="active===0?'margin: 50px 0;':'margin-top: 50px;'">
    <!-- 核对 2018/7/20 Zuow -->
    <navbar>
      <template slot="right">
        <mu-button slot="right" flat @click="openDefault.drawerDefaultOpen = !openDefault.drawerDefaultOpen">
          筛选
        </mu-button>
      </template>
    </navbar>

    <mu-tabs @change="changeTabs" :value.sync="active" color="rgb(69, 133, 245)" indicator-color="#fff" full-width style="position: fixed;top:70px;">
      <mu-tab>今日待卸</mu-tab>
      <mu-tab>历史记录</mu-tab>
    </mu-tabs>

    <!--今日待卸-->
    <div v-if="active==0" ref="container">
      <mu-load-more @refresh="refresh" :refreshing="itemTableList.refreshing" :loading="itemTableList.loading" @load="load">
        <tablePage ref="checkUnloadTableRef" :param="tableParam" :api="getTrainOrderDetailCarriageListByPage" :formatMethod="formatMethodCheckData" :sortName="'lastCommandTime'">
          <template slot-scope="props">
            <template v-for="item in props.data">
              <mu-card style="width: 100%; margin: 10px auto;">
                <mu-card-text>
                  <mu-row>
                    <mu-col span="2">
                      <mu-flex justify-content="center" fill>
                        <mu-checkbox :value="item" v-model="hasCheckList"></mu-checkbox>
                      </mu-flex>
                    </mu-col>
                    <mu-col span="10">
                      <div>
                        股道号：{{item.positionTrack}} <span style="float: right;color: #ddd;" v-if="item.lastErrorMsg">错误</span>
                      </div>
                      <div>
                        车号：{{item.carriageNo}}
                      </div>
                      <div>
                        施封号：{{item.sealNo}}
                      </div>
                      <div>
                        入线时间：{{item.enterTime}}
                      </div>
                    </mu-col>
                  </mu-row>
                  <mu-divider style="margin: 5px 0;"></mu-divider>
                  <mu-row>
                    <mu-col span="5">
                      <mu-flex class="flex-wrapper" justify-content="center" style="font-size:14px;font-weight: 400;" @click="viewDetailNav(item)">
                        查看详情
                      </mu-flex>
                    </mu-col>
                    <mu-col span="2">
                      <mu-flex class="flex-wrapper" justify-content="center" style="font-size:14px;font-weight: 400;">
                        <span style="color: #ddd;">|</span>
                      </mu-flex>
                    </mu-col>
                    <mu-col span="5">
                      <mu-flex class="flex-wrapper" justify-content="center" style="font-size:14px;font-weight: 400;" @click="errorSubmit(item)">
                        错误提交
                      </mu-flex>
                    </mu-col>
                  </mu-row>
                </mu-card-text>
              </mu-card>
            </template>
          </template>
        </tablePage>
      </mu-load-more>
      <div class="buttomSelectBar">
        <mu-row>
          <mu-col span="3">
            <mu-flex justify-content="start" style="margin: 12px 10px;">
              <mu-checkbox :input-value="this.hasCheckList.length === this.orderList.length?true:false" label="全选" @change="handleCheckAll"></mu-checkbox>
            </mu-flex>
          </mu-col>
          <mu-col span="9">
            <mu-flex justify-content="end" style="margin: 5px 0;">
              <mu-button flat disabled small style="float: right;margin-right: 10px;">信息已确认无误</mu-button>
              <mu-button color="info" small style="float: right;margin-right: 10px;"
                         @click="showConfirm">
                确认（{{hasCheckList.length}}）
              </mu-button>
            </mu-flex>
          </mu-col>
        </mu-row>
      </div>
    </div>
    <!--历史记录-->
    <div v-if="active==1">
      <mu-load-more @refresh="refresh" :refreshing="itemTableList.refreshing" :loading="itemTableList.loading" @load="load">
        <tablePage ref="checkUnloadTableRef" :param="tableParam" :api="getTrainOrderDetailCarriageListByPage" :sortName="'lastCommandTime'">
          <template slot-scope="props">
            <template v-for="item in props.data">
              <mu-card style="width: 100%; margin: 10px auto;">
                <mu-card-text>
                  <mu-row>
                    <mu-col span="12">
                      <div>
                        股道号：{{item.positionTrack}} <span style="float: right;color: #ddd;">{{item.lastErrorMsg?'错误':'已确认'}}</span>
                      </div>
                      <div>
                        车号：{{item.carriageNo}}
                      </div>
                      <div>
                        施封号：{{item.sealNo}}
                      </div>
                      <div>
                        入线时间：{{item.enterTime}}
                      </div>
                    </mu-col>
                  </mu-row>
                  <mu-divider style="margin: 5px 0;"></mu-divider>
                  <mu-row @click="viewDetailNav(item)">
                    <mu-col span="6">
                      <mu-flex class="flex-wrapper" justify-content="start" style="font-size:14px;font-weight: 400; ">
                        查看详情
                      </mu-flex>
                    </mu-col>
                    <mu-col span="6">
                      <mu-flex class="flex-demo" justify-content="end"><i class="material-icons">
                        keyboard_arrow_right
                      </i></mu-flex>
                    </mu-col>
                  </mu-row>
                </mu-card-text>
              </mu-card>
            </template>
          </template>
        </tablePage>
      </mu-load-more>
    </div>


    <!--侧边筛选栏-->
    <mu-container>
      <mu-drawer :open.sync="openDefault.drawerDefaultOpen" :docked="false" :right="true">
        <div style="margin: 10px;">
          <mu-row>
            <mu-col :span="12">按入线时间</mu-col>
          </mu-row>
          <mu-row>
            <mu-col :span="12">
              <mu-date-input v-model="tableParam.startDateTime" actions label="选择日期和时间" type="dateTime" view-type="list" full-width landscape></mu-date-input>
            </mu-col>
          </mu-row>
          <mu-row>
            <mu-col :span="12">
              <mu-date-input v-model="tableParam.endDateTime" actions label="选择日期和时间" type="dateTime" view-type="list" full-width landscape></mu-date-input>
            </mu-col>
          </mu-row>
          <mu-row>
            <mu-col :span="12">
              按车号
            </mu-col>
          </mu-row>
          <mu-row>
            <mu-col :span="12">
              <mu-text-field v-model="tableParam.carriageNo"></mu-text-field>
            </mu-col>
          </mu-row>
          <mu-row>
            <mu-col :span="12">
              按箱号
            </mu-col>
          </mu-row>
          <mu-row>
            <mu-col :span="12">
              <mu-text-field v-model="tableParam.containerNo"></mu-text-field>
            </mu-col>
          </mu-row>
          <mu-row>
            <mu-col :span="12">
              按发站
            </mu-col>
          </mu-row>
          <mu-row>
            <mu-col :span="12">
              <mu-text-field v-model="tableParam.startStationName"></mu-text-field>
            </mu-col>
          </mu-row>
          <mu-row>
            <mu-col :span="12">
              按股道
            </mu-col>
          </mu-row>
          <mu-row>
            <mu-col :span="12">
              <mu-select v-model="tableParam.positionTrack">
                <mu-option v-for="option,index in positionTracksList" :key="option" :label="option" :value="option"></mu-option>
              </mu-select>
            </mu-col>
          </mu-row>
          <mu-row>
            <mu-col :span="6">
              <mu-button small @click="resetTableParam">重置</mu-button>
            </mu-col>
            <mu-col :span="6">
              <mu-button small color="info" @click="tableParamHandle">提交</mu-button>
            </mu-col>
          </mu-row>
        </div>
      </mu-drawer>

    </mu-container>

    <!--底部弹出框-->
    <mu-container>
      <mu-bottom-sheet :open.sync="openDefault.bottomSheetDefaultOpen">
        <mu-list @item-click="openDefault.bottomSheetDefaultOpen=false">
          <mu-sub-header>Select One</mu-sub-header>
          <mu-list-item button>
            <mu-list-item-action>
              <mu-icon value="grade" color="orange"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>Star</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button>
            <mu-list-item-action>
              <mu-icon value="inbox" color="blue"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>Inbox</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button>
            <mu-list-item-action>
              <mu-icon value="chat" color="green"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>Chat</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button>
            <mu-list-item-action>
              <mu-icon value="email" color="cyan"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>Email</mu-list-item-title>
          </mu-list-item>
        </mu-list>
      </mu-bottom-sheet>
    </mu-container>

    <!--消息确认框-->
    <mu-container>
      <mu-dialog :title="messageDialog.title" width="600" max-width="80%" :esc-press-close="false" :overlay-close="false" :open.sync="messageDialog.openAlert">
        {{messageDialog.dialogCentent}}
        <mu-button slot="actions" flat color="primary" @click="submitOk">确认</mu-button>
        <mu-button slot="actions" flat color="primary" @click="messageDialog.openAlert=false">取消</mu-button>
      </mu-dialog>
    </mu-container>
  </div>
</template>

<script>
  import {getTrainOrderDetailCarriageListByPage, stateConfirmMultiple, getPositionTracks} from '@/api/common/index'
  import _ from 'lodash'
  import tablePage from '@/components/tablePage'
  import {mapGetters} from 'vuex'
  import moment from 'moment'

  export default {
    name: 'index',
    data () {
      let status = {
        '0': contant.unLoad.checked,
        '1': contant.unLoad.unLoaded
      }
      let active = 0
      let tableParam = {
        state: contant.unLoad.checked
      }
      let hasCheckList = []
      let orderList = []
      let messageDialog = {
        title: '确认',
        dialogCentent: '已确认无误，提交？',
        openAlert: false
      }
      let labelPosition = 'top'
      let itemTableList = {
        num: 10,
        refreshing: false,
        loading: false,
        text: 'List'
      }
      let openDefault = {
        drawerDefaultOpen: false,
        bottomSheetDefaultOpen: false
      }
      let positionTracksList = []
      let datas = {
        positionTracksList,
        orderList,
        hasCheckList,
        status,
        tableParam,
        messageDialog,
        active,
        itemTableList,
        openDefault,
        labelPosition,
        getTrainOrderDetailCarriageListByPage
      }
      return datas
    },
    methods: {
      // 重置
      resetTableParam () {
        delete this.tableParam.startDateTime
        delete this.tableParam.endDateTime
        delete this.tableParam.carriageNo
        delete this.tableParam.containerNo
        delete this.tableParam.startStationName
        delete this.tableParam.positionTrack
        if (this.active === 0) {
          this.tableParam.state = contant.unLoad.checked
          delete this.tableParam.stateUpper
        } else if (this.active === 1) {
          this.tableParam.stateUpper = contant.unLoad.unLoaded
          delete this.tableParam.state
        }
        this.orderList = []
        this.hasCheckList = []
        this.$refs['checkUnloadTableRef'].dataRefresh()
        this.openDefault.drawerDefaultOpen = false
      },
      tableParamHandle () {
        if (moment(this.tableParam.startDateTime) > moment(this.tableParam.endDateTime)) {
          this.$toast.error('开始时间不得大于结束时间！')
          return
        }
        this.orderList = []
        this.$refs['checkUnloadTableRef'].dataRefresh()
        this.openDefault.drawerDefaultOpen = false
      },
      // tab切换刷新表格
      changeTabs () {
        delete this.tableParam.startDateTime
        delete this.tableParam.endDateTime
        delete this.tableParam.carriageNo
        delete this.tableParam.containerNo
        delete this.tableParam.startStationName
        delete this.tableParam.positionTrack
        if (this.active === 0) {
          this.tableParam.state = contant.unLoad.checked
          delete this.tableParam.stateUpper
        } else if (this.active === 1) {
          this.tableParam.stateUpper = contant.unLoad.unLoaded
          delete this.tableParam.state
        }
        this.orderList = []
        this.$refs['checkUnloadTableRef'].dataRefresh()
      },
      /**
       * TODO(格式化数据)
       * @auther zhangQ
       * @date 2018/7/20 21:33
       */
      formatMethodCheckData (rows) {
        rows.forEach((item) => {
          this.orderList.push(item)
        })
        return rows
      },
      /**
       * TODO(错误提交)
       * @auther zhangQ
       * @date 2018/7/20 19:45
       */
      errorSubmitNav (item) {
        this.$router.push({name: 'errorSubmit', query: {id: item.id, errorState: item.state}})
      },
      /**
       * TODO(查看详情)
       * @auther zhangQ
       * @date 2018/7/20 19:45
       */
      viewDetailNav (item) {
        this.$router.push({name: 'viewDetail', query: {carriageNo: item.carriageNo, trainOrderId: item.trainOrderId}})
      },
      errorSubmit (item) {
        this.$router.push(
          {
            name: 'errorSubmit',
            // query: {id: item.id, errorState: contant.unLoad.unLoaded},
            query: {id: item.id, errorState: contant.unLoad.unLoaded, carriageNo: item.carriageNo, trainOrderId: item.trainOrderId}
          }
        )
      },
      showConfirm () {
        if (this.hasCheckList.length <= 0) {
          this.$toast.error('请选择运单后再确认！')
        } else {
          this.messageDialog.openAlert = true
        }
      },
      // 刷新
      refresh () {
        this.$refs['checkUnloadTableRef'].dataRefresh()
        this.itemTableList.refreshing = true
        this.$refs.container.scrollTop = 0
        setTimeout(() => {
          this.itemTableList.refreshing = false
        }, 200)
      },
      // 下拉加载
      load () {
        this.$refs['checkUnloadTableRef'].nextPage()
        this.itemTableList.loading = true
        setTimeout(() => {
          this.itemTableList.loading = false
        }, 200)
      },
      handleCheckAll () {
        if (this.hasCheckList.length === this.orderList.length) {
          this.hasCheckList = []
        } else if (this.hasCheckList.length < this.orderList.length) {
          this.hasCheckList = []
          _.forEach(this.orderList, (item) => {
            this.hasCheckList.push(item)
          })
        }
      },
      // 提交确认
      submitOk () {
        this.messageDialog.openAlert = false
        let submitList = []
        _.forEach(this.hasCheckList, (item) => {
          let submitOneList = {
            carriageNo: item.carriageNo, // 车厢号
            trainOrderId: item.trainOrderId, // 主运单ID
            // id: item.id, // 可选，针对单个箱子，两个可选参数同时出现或不出现
            // containerNo: item.containerNo, // 可选，针对单个箱子
            state: contant.unLoad.unLoaded
          }
          submitList.push(submitOneList)
        })
        stateConfirmMultiple(submitList).then(res => {
          if (res.data.isSuccess === 1) {
            this.resetTableParam()
            this.hasCheckList = []
            this.$toast.success('操作成功！')
          } else {
            this.$toast.error('操作失败，请重试！')
          }
        }).catch()
      },
      // 获取股道列表
      getPositionTracksList () {
        getPositionTracks().then(res => {
          if (res.data.isSuccess === 1) {
            this.positionTracksList = res.data.data
          }
        }).catch()
      }
    },
    created () {
    },
    mounted () {
      this.getPositionTracksList()
      // this.tableParam.positionTrack = this.currentUser.conf.positionTrack
    },
    computed: {
      ...mapGetters(['activeMenu', 'currentUser', 'currentToken'])
    },
    components: {tablePage}
  }
</script>

<style scoped>

  .demo-loading-wrap {
    height: 300px;
  }

  .mu-button {
    margin: 6px 8px;
  }

  .buttomSelectBar {
    width: 100%;
    z-index: 400;
    height: 50px;
    background: #eee;
    position: fixed;
    bottom: 0;
  }

  .mu-drawer {
    overflow: auto;
    top: 118px;
  }

  .mu-overlay {
    top: 118px;
  }
</style>
